<template>
    <el-dialog :model-value="show" title="分配角色" @close="emit('hide')">
        <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.description" autocomplete="off" :rows="4" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="CancelFn">取消</el-button>
                <el-button type="primary" @click="addFn"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { addRoleAPI, editRoleAPI, getUserRoleAPI } from "./api";
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    id: {
        type: Number,
        default: 0,
    },
    name: {
        type: String,
        default: "",
    },
    description: {
        type: String,
        default: "",
    },
});

// 如果要传递一个 对象类型的 自定义属性，需要下面的写法
// interface IProp{
//     data: IRoleModel
// }
// const prop = withDefaults(defineProps<IProp>(), {})

const form = reactive<IRoleModel>({
    name: "",
    description: "",
    status: 0,
    id: 0,
});
const rules = {
    name: [{ required: true, trigger: "blur", message: "请输入角色名字" }],
};
const formRef = ref<FormInstance>();
const emit = defineEmits(["hide", "ShutDown"]);

watch(
    () => props.id,
    () => {
        if (props.id !== 0) {
            console.log("这是watch里面的props.name", props.name);
            console.log("这是watch里面的props.description", props.description);
            form.id = props.id;
            form.name = props.name;
            form.description = props.description;
            //   可以一次性传递一个对象，然后进行浅拷贝
            //   Object.assign(form,props.data)
        } else {
            form.id = 0;
            form.name = "";
            form.description = "";
        }
    }
);

const addFn = () => {
    formRef.value?.validate((ok: boolean) => {
        if (ok) {
            ElMessageBox.confirm("此操作将添加角色信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    if (props.id !== 0) {
                        editRoleAPI(form).then((res) => {
                            if (res.code === 200) {
                                ElMessage.success("修改成功");
                                formRef.value?.resetFields();
                                form.description = "";
                                emit("hide");
                            }
                        });
                    } else {
                        addRoleAPI(form).then((res) => {
                            if (res.code === 200) {
                                ElMessage.success("添加成功");
                                formRef.value?.resetFields();
                                form.description = "";
                                emit("hide");
                            }
                        });
                    }
                })
                .catch(() => {
                    formRef.value?.resetFields();
                });
        } else {
            ElMessage.warning("请输入角色名字");
        }
    });
};
const CancelFn = () => {
    formRef.value?.resetFields();
    emit("hide");
};
</script>
<style lang="less" scoped>

</style>